<template>
  <div class="register-container" style="background-image: url('http://localhost:8992/user/photo/mian.png'); background-size: cover; background-position: center;">
    <div class="register-card">
      <div class="avatar-container">
        <img src="http://localhost:8992/user/photo/tou.png" alt="Avatar" class="avatar">
      </div>
      <h2 class="title">数字人模拟面试系统</h2>
      <p class="subtitle">注册新账号开启面试之旅</p>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="0">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" :prefix-icon="User" size="large"></el-input>
        </el-form-item>

        <el-form-item prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码" :prefix-icon="PhoneFilled" size="large"></el-input>
        </el-form-item>

        <el-form-item prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" :prefix-icon="Message" size="large"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" :prefix-icon="Lock" size="large"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input v-model="form.confirmPassword" placeholder="请再次输入密码" type="password" :prefix-icon="Lock" size="large"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="register-button" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
      <div class="copyright">© 2025 数字人模拟面试系统 版权所有</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import {Message, User, PhoneFilled, Lock, Plus} from '@element-plus/icons-vue';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router=useRouter();

// 表单引用
const formRef = ref(null);
// 表单数据
const form = ref({
  username: '',
  phone:"",
  avatarUrl:"",
  email: '',
  password: '',
  confirmPassword: ''
});
// 表单验证规则
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 7, message: '用户名应该再3到7个字符内', trigger: 'blur' },
  ],
  phone:  [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { min: 11,max:11,  message: '请输入正确的号码格式', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

// 注册处理函数
const handleRegister = async () => {
axios({
  url:"/api/user/user/add",
  method:"get",
  params:form.value
}).then((rew)=>{
  if(rew.data!=null){
    console.log(form.value)
    ElMessage.success("注册成功")
    console.log("注册成功")
    router.push("/")
    form.value=[]
  }
})
};




// 添加图片
// const imageUrl = ref('')
// const handleAvatarSuccess = (response, uploadFile) => {
//   console.log(response)
//   form.value.avatarUrl=response
//
//   imageUrl.value = URL.createObjectURL(uploadFile.raw)
// }

// const beforeAvatarUpload = (rawFile) => {
//   if (rawFile.type !== 'image/jpeg ' && rawFile.type !== 'image/png' && rawFile.type == 'image/jpg') {
//     ElMessage.error('请上传正确的格式')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 2) {
//     ElMessage.error('上传不能大于 2MB!')
//     return false
//   }
//   return true
// }
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.register-card {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 40px 60px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 400px;
  min-height: 500px;
}
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.title {
  text-align: center;
  margin-bottom: 10px;
}
.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}
.register-button {
  width: 100%;
}
.copyright {
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 12px;
}
/* 设置输入框的宽度 */
.el-input {
  width: 100%;
}
</style>




<!--<style>-->
<!--.avatar-uploader .el-upload {-->
<!--  border: 1px dashed var(&#45;&#45;el-border-color);-->
<!--  border-radius: 6px;-->
<!--  cursor: pointer;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--  transition: var(&#45;&#45;el-transition-duration-fast);-->
<!--}-->

<!--.avatar-uploader .el-upload:hover {-->
<!--  border-color: var(&#45;&#45;el-color-primary);-->
<!--}-->

<!--/*.el-icon.avatar-uploader-icon {*/-->
<!--/*  font-size: 28px;*/-->
<!--/*  color: #8c939d;*/-->
<!--/*  width: 100px;*/-->
<!--/*  height: 100px;*/-->
<!--/*  text-align: center;*/-->
<!--/*}*/-->
<!--</style>-->